
<!DOCTYPE html>
<html lang="en">
    <head><meta name="generator" content="Hexo 3.9.0">
    
        <title>FairyGUI - Drag&Drop</title>
    
        <meta charset="utf-8">
        <meta name="description" content="FairyGUI教程">
        <meta name="keywords" content="FairyGUI,FGUI,FairyGUI教程">
        
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <meta property="og:type" content="article">
        <meta property="og:title" content="-Drag&DropFairyGUI">
        <meta property="og:description" content="FairyGUI教程">

        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="Drag&Drop — FairyGUI">
        <meta name="twitter:description" content="FairyGUI教程">

      <!--  <link href='//fonts.proxy.ustclug.org/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->

        <!-- main page styles -->
        <link rel="stylesheet" href="/docs/css/page.css">

        <!-- this needs to be loaded before guide's inline scripts -->
        <script src="/docs/js/vue.min.js"></script>
        <script>window.PAGE_TYPE = "guide_editor"</script>
    </head>
    <body class="docs">        <div id="mobile-bar" data-bg-text="FairyGUI">
            <a class="menu-button"></a>
        </div>
        <div id="header">
  <ul id="nav">
    <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
  </ul>
</div>

        
            <div id="main" class="fix-sidebar">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
    </ul>
    <div class="list">
        <ul class="menu-root">
            

	 			
	                
	                <li>
	                    <a href="/docs/guide/index.html" class="sidebar-link">导读</a>
	                </li>
	            
	
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/index.html" class="sidebar-link">编辑器使用基础</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/project_settings.html" class="sidebar-link">项目设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/package.html" class="sidebar-link">包</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/branch.html" class="sidebar-link">分支</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/publish.html" class="sidebar-link">发布</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/object.html" class="sidebar-link">元件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/image.html" class="sidebar-link">图片</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/movieclip.html" class="sidebar-link">动画</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/graph.html" class="sidebar-link">图形</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/loader.html" class="sidebar-link">装载器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/text.html" class="sidebar-link">文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/richtext.html" class="sidebar-link">富文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/group.html" class="sidebar-link">组</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/component.html" class="sidebar-link">组件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollpane.html" class="sidebar-link">滚动容器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/controller.html" class="sidebar-link">控制器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/relation.html" class="sidebar-link">关联系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/label.html" class="sidebar-link">标签</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/button.html" class="sidebar-link">按钮</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/combobox.html" class="sidebar-link">下拉框</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/progressbar.html" class="sidebar-link">进度条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/slider.html" class="sidebar-link">滑动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollbar.html" class="sidebar-link">滚动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/list.html" class="sidebar-link">列表</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/tree.html" class="sidebar-link">树</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/popup.html" class="sidebar-link">Popup</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/dragdrop.html" class="sidebar-link current">Drag&Drop</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/window.html" class="sidebar-link">窗口系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/transition.html" class="sidebar-link">动效</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/adaptation.html" class="sidebar-link">适配</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/i18n.html" class="sidebar-link">多国语言</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/export.html" class="sidebar-link">导入和导出</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/preference.html" class="sidebar-link">偏好设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/plugin.html" class="sidebar-link">插件</a>
	                </li>
	            
	
	            
	                
	                
	                <li><h3>SDK</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/sdk/laya.html" class="sidebar-link">LayaAir</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/egret.html" class="sidebar-link">Egret</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cocos2dx.html" class="sidebar-link">Cocos2dx</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/creator.html" class="sidebar-link">Cocos Creator</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cryengine.html" class="sidebar-link">Cry Engine</a>
	                </li>
	            

	            
	                
	                
	                <li><h3>SDK - Unity</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/unity/index.html" class="sidebar-link">显示UI面板</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/transform.html" class="sidebar-link">坐标系统</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/atlas.html" class="sidebar-link">纹理集的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/font.html" class="sidebar-link">字体的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/input.html" class="sidebar-link">输入处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/event.html" class="sidebar-link">事件机制</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/insert3d.html" class="sidebar-link">插入模型/粒子/Spine/Canvas</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/uipainter.html" class="sidebar-link">曲面UI</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/drawcall.html" class="sidebar-link">DrawCall优化</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/lua.html" class="sidebar-link">在Lua中使用</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/special.html" class="sidebar-link">特色功能</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/faq.html" class="sidebar-link">常见问题</a>
	                </li>
	            

            
        </ul>
    </div>
</div>


<div class="content guide_editor with-sidebar ">
    
      <h1>Drag&Drop</h1>
    
    <h2 id="自由拖放"><a href="#自由拖放" class="headerlink" title="自由拖放"></a>自由拖放</h2><p>使一个元件能够被拖动，很简单，设置draggable属性就可以了，例如：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">aObject.draggable = <span class="literal">true</span>;</span><br></pre></td></tr></table></figure>
<p>设置后当玩家按住元件，就可以随意拖动它。可以设置一个矩形限制拖动范围：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//注意这里的矩形范围使用的是舞台上的坐标，不是元件的本地坐标。</span></span><br><span class="line">aObject.dragBounds = <span class="keyword">new</span> Rect(<span class="number">100</span>,<span class="number">100</span>,<span class="number">200</span>,<span class="number">200</span>);</span><br></pre></td></tr></table></figure>
<p>拖动开始、拖动的过程和拖动结束都可以获得通知：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//Unity/Cry</span></span><br><span class="line">aObject.onDragStart.Add(onDragStart);</span><br><span class="line">aObject.onDragMove.Add(onDragMove);</span><br><span class="line">aObject.onDragEnd.Add(onDragEnd);</span><br><span class="line"></span><br><span class="line"><span class="comment">//AS3</span></span><br><span class="line">aObject.addEventListener(DragEvent.DRAG_START, onDragStart);</span><br><span class="line">aObject.addEventListener(DragEvent.DRAG_MOVING, onDragMove);</span><br><span class="line">aObject.addEventListener(DragEvent.DRAG_END, onDragEnd);</span><br><span class="line"></span><br><span class="line"><span class="comment">//Egret</span></span><br><span class="line">aObject.addEventListener(fairygui.DragEvent.DRAG_START, <span class="keyword">this</span>.onDragStart, <span class="keyword">this</span>);</span><br><span class="line">aObject.addEventListener(fairygui.DragEvent.DRAG_MOVING, <span class="keyword">this</span>.onDragMove, <span class="keyword">this</span>);</span><br><span class="line">aObject.addEventListener(fairygui.DragEvent.DRAG_END, <span class="keyword">this</span>.onDragEnd, <span class="keyword">this</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//Laya</span></span><br><span class="line">aObject.<span class="keyword">on</span>(fairygui.Events.DRAG_START, <span class="keyword">this</span>, <span class="keyword">this</span>.onDragStart);</span><br><span class="line">aObject.<span class="keyword">on</span>(fairygui.Events.DRAG_MOVE, <span class="keyword">this</span>, <span class="keyword">this</span>.onDragMove);</span><br><span class="line">aObject.<span class="keyword">on</span>(fairygui.Events.DRAG_END, <span class="keyword">this</span>, <span class="keyword">this</span>.onDragEnd);</span><br><span class="line"></span><br><span class="line"><span class="comment">//Cocos2dx</span></span><br><span class="line">aObject-&gt;addEventListener(UIEventType::DragStart, CC_CALLBACK_1(AClass::onDragStart, this));</span><br><span class="line">aObject-&gt;addEventListener(UIEventType::DragMove, CC_CALLBACK_1(AClass::onDragMove, this));</span><br><span class="line">aObject-&gt;addEventListener(UIEventType::DragEnd, CC_CALLBACK_1(AClass::onDragEnd, this));</span><br><span class="line"></span><br><span class="line"><span class="comment">//CocosCreator</span></span><br><span class="line">aObject.<span class="keyword">on</span>(fgui.Event.DRAG_START, <span class="keyword">this</span>.onDragStart, <span class="keyword">this</span>);</span><br><span class="line">aObject.<span class="keyword">on</span>(fgui.Event.DRAG_MOVING, <span class="keyword">this</span>.onDragMove, <span class="keyword">this</span>);</span><br><span class="line">aObject.<span class="keyword">on</span>(fgui.Event.DRAG_END, <span class="keyword">this</span>.onDragEnd, <span class="keyword">this</span>);</span><br></pre></td></tr></table></figure>
<h2 id="转换拖动"><a href="#转换拖动" class="headerlink" title="转换拖动"></a>转换拖动</h2><p>如果不希望点击元件的任何地方都可以拖动，那么可以用转换拖动的方式。例如FairyGUI里的窗口，点击它的标题栏，就可以拖动窗口，我们以这个为例子分析怎么实现：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//设置拖动区域为可拖动，然后侦听拖动开始事件</span></span><br><span class="line">_dragArea.draggable = <span class="literal">true</span>;</span><br><span class="line">_dragArea.onDragStart.Add(onDragStart);</span><br><span class="line"></span><br><span class="line"><span class="comment">//Unity/Cry/MonoGame</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">onDragStart</span>(<span class="params">EventContext context</span>)</span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    <span class="comment">//取消掉源拖动，也就是_dragArea不会被实际拖动</span></span><br><span class="line">    context.PreventDefault();</span><br><span class="line"></span><br><span class="line">    <span class="comment">//设置窗口处于拖动状态。context.data是手指的id。</span></span><br><span class="line">    <span class="keyword">this</span>.StartDrag((<span class="keyword">int</span>)context.data);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//Laya</span></span><br><span class="line">onDragStart(evt:laya.events.Event) &#123;</span><br><span class="line">    <span class="keyword">var</span> obj: fairygui.GObject = fairygui.GObject.cast(evt.currentTarget);</span><br><span class="line"></span><br><span class="line">    <span class="comment">//取消对原目标的拖动，换成一个替代品</span></span><br><span class="line">    obj.stopDrag();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">this</span>.startDrag();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//CocosCreator</span></span><br><span class="line">onDragStart(evt:fgui.Event) &#123;</span><br><span class="line">    <span class="keyword">let</span> obj:fgui.GObject = fgui.GObject.cast(evt.currentTarget);</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//取消对原目标的拖动，换成一个替代品</span></span><br><span class="line">    obj.stopDrag();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">this</span>.startDrag();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>通过以上的方式，实现当_dragArea被尝试拖动时，会转换为Window自身的拖动。</p>
<h2 id="替身拖动"><a href="#替身拖动" class="headerlink" title="替身拖动"></a>替身拖动</h2><p>拖动只能在元件的父组件内移动，如果你需要在全屏幕内移动，那么需要用到替身拖动。替身拖动的启动方式需要先作转换：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">aObject.draggable = <span class="literal">true</span>;</span><br><span class="line">aObject.onDragStart.Add(onDragStart);</span><br><span class="line"></span><br><span class="line"><span class="comment">//Unity/Cry/MonoGame</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">onDragStart</span>(<span class="params">EventContext context</span>)</span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    <span class="comment">//取消掉源拖动</span></span><br><span class="line">    context.PreventDefault();</span><br><span class="line"></span><br><span class="line">    <span class="comment">//icon是这个对象的替身图片，userData可以是任意数据，底层不作解析。context.data是手指的id。</span></span><br><span class="line">    DragDropManager.inst.StartDrag(<span class="literal">null</span>, icon, userData, (<span class="keyword">int</span>)context.data);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>使用了替身拖动后，如果要检测拖动结束，不能再监听原来的对象，而应该使用：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//Unity/Cry/MonoGame</span></span><br><span class="line">DragDropManager.inst.dragAgent.onDragEnd.Add(onDragEnd);</span><br><span class="line"></span><br><span class="line"><span class="comment">//CocosCreator</span></span><br><span class="line">DragDropManager.inst.dragAgent.<span class="keyword">on</span>(fgui.Event.DRAG_END, <span class="keyword">this</span>.onDragEnd, <span class="keyword">this</span>);</span><br></pre></td></tr></table></figure>
<p>DragDropManager还提供了常用的拖-&gt;放功能，如果一个组件需要接收其他元件拖动到它里面并释放的事件，可以使用：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">aComponent.onDrop.Add(onDrop);</span><br><span class="line"></span><br><span class="line"><span class="comment">//Unity/Cry/MonoGame</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">onDrop</span>(<span class="params">EventContext context</span>)</span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    <span class="comment">//这里context.data就是StartDrag里传入的userData</span></span><br><span class="line">    Debug.Log(context.data);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//CocosCreator</span></span><br><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">onDrop</span>(<span class="params">dropTarget:fgui.GObject, userData:any</span>)</span> &#123;</span><br><span class="line">    <span class="comment">//这里sourceData是StartDrag传入的userData</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>DragDropManager使用了一个图片资源表达替身，这个图片是用装载器显示的。这个装载器是DragDropManager.inst.dragAgent，你可以调整它的参数以适应实际项目需求。</p>
<p>如果你的替身不是一个图片那么简单，比如你需要用一个组件作为替身，那么你可以定义自己的DragDropManager，直接复制一个DragDropManager，在上面修改写你自己的逻辑，然后使用你这个DragDropManager即可。DragDropManager这个类的设计就没有考虑到所有实际情况的，它只是作为一个参考。</p>

    
    <div class="footer">
      发现错误或想贡献文档?
      <a href="https://github.com/fairygui/fairygui.github.io/tree/master/src/guide/editor/dragdrop.md" target="_blank">
        在 Github 上编辑此文档!
      </a>
    </div>
</div>

                
            </div>
            <script src="/docs/js/smooth-scroll.min.js"></script>
        

        <!-- main custom script for sidebars, version selects etc. -->        
        <script src="/docs/js/css.escape.js"></script>
        <script src="/docs/js/common.js"></script>
    </body>
</html>
